<template>
	<div>
		<md-toolbar class="md-dense" md-elevation="0">
			<span class="md-body-1">{{getLangText(label.dataZoom)}}</span>
			<span class="md-toolbar-section-end">
				<!-- <md-button class="md-icon-button" @click="sendStyle" v-show="isShow">
					<i class="iconfont iconsave"></i>
				</md-button> -->
				<md-button class="md-icon-button" @click="sendStyle">
					<i :class="['iconfont',isShow?'iconsave':'iconright']"></i>
				</md-button>
			</span>
		</md-toolbar>
		<div v-if="isShow">
			<div style="padding:0 8px;">
				<div class="table-row-item">
					<span>X{{getLangText(label.dataZoom)}}{{getLangText(label.show)}}:</span>
					<span>
						{{getLangText(label.hide)}}
						<md-switch v-model="dataZoom[0].show"></md-switch>
						{{getLangText(label.show)}}
					</span>
				</div>
				<md-field>
					<label>{{getLangText(label.silder)}}{{getLangText(label.filterMode)}}</label>
					<md-select v-model="dataZoom[0].filterMode">
						<md-option :value="item.en" v-for="item in filterMode" :key="item.en">{{getLangText(item)}}</md-option>
					</md-select>
				</md-field>

				<md-field>
					<label>{{getLangText(label.inside)}}{{getLangText(label.filterMode)}}</label>
					<md-select v-model="dataZoom[1].filterMode">
						<md-option :value="item.en" v-for="item in filterMode" :key="item.en">{{getLangText(item)}}</md-option>
					</md-select>
				</md-field>

				<div class="table-row-item">
					<span>X{{getLangText(label.bgColor)}}:</span>
					<span>
						<span
							class="color-span"
							:style="{background:dataZoom[0].backgroundColor}"
							@click="showColorPicker('backgroundColor',0)"
						></span>
						{{dataZoom[0].backgroundColor}}
					</span>
				</div>

				<color-picker
					:lang-type="langType"
					:rgba="dataZoom[0].backgroundColor"
					@color-result="onColorPicker"
					:show-picker="picker.show&&picker.current=='backgroundColor'&&picker.idx==0"
				></color-picker>

				<div class="table-row-item">
					<span>X{{getLangText(label.fillerColor)}}:</span>
					<span>
						<span
							class="color-span"
							:style="{background:dataZoom[0].fillerColor}"
							@click="showColorPicker('fillerColor',0)"
						></span>
						{{dataZoom[0].fillerColor}}
					</span>
				</div>

				<color-picker
					:lang-type="langType"
					:rgba="dataZoom[0].fillerColor"
					@color-result="onColorPicker"
					:show-picker="picker.show&&picker.current=='fillerColor'&&picker.idx==0"
				></color-picker>

				<div class="table-row-item">
					<span>X{{getLangText(label.borderColor)}}:</span>
					<span>
						<span
							class="color-span"
							:style="{background:dataZoom[0].borderColor}"
							@click="showColorPicker('borderColor',0)"
						></span>
						{{dataZoom[0].borderColor}}
					</span>
				</div>

				<color-picker
					:lang-type="langType"
					:rgba="dataZoom[0].borderColor"
					@color-result="onColorPicker"
					:show-picker="picker.show&&picker.current=='borderColor'&&picker.idx==0"
				></color-picker>

				<md-field>
					<label>X{{getLangText(label.orient)}}</label>
					<md-select v-model="dataZoom[0].orient">
						<md-option value="horizontal">{{getLangText(label.horizontal)}}</md-option>
						<md-option value="vertical">{{getLangText(label.vertical)}}</md-option>
					</md-select>
				</md-field>
				<md-field>
					<label>X{{getLangText(label.left)}}</label>
					<md-input v-model="dataZoom[0].left"></md-input>
				</md-field>

				<md-field>
					<label>X{{getLangText(label.top)}}</label>
					<md-input v-model="dataZoom[0].top"></md-input>
				</md-field>

				<md-field>
					<label>X{{getLangText(label.right)}}</label>
					<md-input v-model="dataZoom[0].right"></md-input>
				</md-field>

				<md-field>
					<label>X{{getLangText(label.bottom)}}</label>
					<md-input v-model="dataZoom[0].bottom"></md-input>
				</md-field>
			</div>
			<line-style
				:lang-type="langType"
				:line-name="'X'+getLangText(label.dataBackground)"
				@line-style-result="onXLineStyle"
				:option="dataZoom[0].dataBackground.lineStyle"
			></line-style>
			<area-style
				:lang-type="langType"
				:area-name="'X'+getLangText(label.dataBackground)"
				@area-style-result="onXAreaStyle"
				:option="dataZoom[0].dataBackground.areaStyle"
			></area-style>
			<text-style
				:lang-type="langType"
				:text-name="'X'+getLangText(label.silder)"
				@text-style-result="onXTextStyle"
				:option="dataZoom[0].textStyle"
			></text-style>
			<handle-style
				:lang-type="langType"
				handle-name="X"
				@handle-style-result="onXHandleStyle"
				:option="dataZoom[0].handleStyle"
			></handle-style>

			<div style="padding:0 8px;">
				<div class="table-row-item">
					<span>Y{{getLangText(label.dataZoom)}}{{getLangText(label.show)}}:</span>
					<span>
						{{getLangText(label.hide)}}
						<md-switch v-model="dataZoom[2].show"></md-switch>
						{{getLangText(label.show)}}
					</span>
				</div>
				<md-field>
					<label>{{getLangText(label.silder)}}{{getLangText(label.filterMode)}}</label>
					<md-select v-model="dataZoom[2].filterMode">
						<md-option :value="item.en" v-for="item in filterMode" :key="item.en">{{getLangText(item)}}</md-option>
					</md-select>
				</md-field>

				<md-field>
					<label>{{getLangText(label.inside)}}{{getLangText(label.filterMode)}}</label>
					<md-select v-model="dataZoom[3].filterMode">
						<md-option :value="item.en" v-for="item in filterMode" :key="item.en">{{getLangText(item)}}</md-option>
					</md-select>
				</md-field>

				<div class="table-row-item">
					<span>Y{{getLangText(label.bgColor)}}:</span>
					<span>
						<span
							class="color-span"
							:style="{background:dataZoom[2].backgroundColor}"
							@click="showColorPicker('backgroundColor',2)"
						></span>
						{{dataZoom[2].backgroundColor}}
					</span>
				</div>

				<color-picker
					:lang-type="langType"
					:rgba="dataZoom[2].backgroundColor"
					@color-result="onColorPicker"
					:show-picker="picker.show&&picker.current=='backgroundColor'&&picker.idx==2"
				></color-picker>

				<div class="table-row-item">
					<span>Y{{getLangText(label.fillerColor)}}:</span>
					<span>
						<span
							class="color-span"
							:style="{background:dataZoom[2].fillerColor}"
							@click="showColorPicker('fillerColor',2)"
						></span>
						{{dataZoom[2].fillerColor}}
					</span>
				</div>

				<color-picker
					:lang-type="langType"
					:rgba="dataZoom[2].fillerColor"
					@color-result="onColorPicker"
					:show-picker="picker.show&&picker.current=='fillerColor'&&picker.idx==2"
				></color-picker>

				<div class="table-row-item">
					<span>Y{{getLangText(label.borderColor)}}:</span>
					<span>
						<span
							class="color-span"
							:style="{background:dataZoom[2].borderColor}"
							@click="showColorPicker('borderColor',2)"
						></span>
						{{dataZoom[2].borderColor}}
					</span>
				</div>

				<color-picker
					:lang-type="langType"
					:rgba="dataZoom[2].borderColor"
					@color-result="onColorPicker"
					:show-picker="picker.show&&picker.current=='borderColor'&&picker.idx==2"
				></color-picker>

				<md-field>
					<label>Y{{getLangText(label.orient)}}</label>
					<md-select v-model="dataZoom[2].orient">
						<md-option value="horizontal">{{getLangText(label.horizontal)}}</md-option>
						<md-option value="vertical">{{getLangText(label.vertical)}}</md-option>
					</md-select>
				</md-field>

				<md-field>
					<label>Y{{getLangText(label.left)}}</label>
					<md-input v-model="dataZoom[2].left"></md-input>
				</md-field>

				<md-field>
					<label>Y{{getLangText(label.top)}}</label>
					<md-input v-model="dataZoom[2].top"></md-input>
				</md-field>

				<md-field>
					<label>Y{{getLangText(label.right)}}</label>
					<md-input v-model="dataZoom[2].right"></md-input>
				</md-field>

				<md-field>
					<label>Y{{getLangText(label.bottom)}}</label>
					<md-input v-model="dataZoom[2].bottom"></md-input>
				</md-field>
			</div>
			<line-style
				:lang-type="langType"
				:line-name="'Y'+getLangText(label.dataBackground)"
				@line-style-result="onYLineStyle"
				:option="dataZoom[2].dataBackground.lineStyle"
			></line-style>
			<area-style
				:lang-type="langType"
				:area-name="'Y'+getLangText(label.dataBackground)"
				@area-style-result="onYAreaStyle"
				:option="dataZoom[2].dataBackground.areaStyle"
			></area-style>
			<text-style
				:lang-type="langType"
				:text-name="'Y'+getLangText(label.silder)"
				@text-style-result="onYTextStyle"
				:option="dataZoom[2].textStyle"
			></text-style>
			<handle-style
				:lang-type="langType"
				handle-name="Y"
				@handle-style-result="onYHandleStyle"
				:option="dataZoom[2].handleStyle"
			></handle-style>
		</div>
	</div>
</template>
<script>
	import ColorPicker from "@/components/comp/ColorPicker";
	import LineStyle from "@/components/comp/LineStyle";
	import AreaStyle from "@/components/comp/AreaStyle";
	import TextStyle from "@/components/comp/TextStyle";
	import HandleStyle from "@/components/comp/HandleStyle";
	export default {
		name: "DataZoom",
		props: {
			langType: {
				type: String,
				default: window.localStorage.getItem("langType")
			},
			option: {
				type: Array,
				default: function() {
					return [];
				}
			}
		},
		components: {
			"color-picker": ColorPicker,
			"line-style": LineStyle,
			"area-style": AreaStyle,
			"text-style": TextStyle,
			"handle-style": HandleStyle
		},
		data: () => ({
			label: {
				dataZoom: { zh: "区域缩放", en: "dataZoom" },
				show: { zh: "显示", en: "show" },
				hide: { zh: "隐藏", en: "hide" },
				yes: { zh: "是", en: "yes" },
				no: { zh: "否", en: "no" },
				filterMode: { zh: "数据过滤模式", en: "filterMode" },
				inside: { zh: "区域", en: "inside" },
				silder: { zh: "滑块", en: "silder" },
				bgColor: { zh: "背景颜色", en: "bgColor" },
				dataBackground: { zh: "数据阴影", en: "dataBackground" },
				fillerColor: { zh: "填充颜色", en: "fillerColor" },
				borderColor: { zh: "边框颜色", en: "borderColor" },
				orient: { zh: "布局朝向", en: "orient" },
				horizontal: { zh: "横向", en: "horizontal" },
				vertical: { zh: "纵向", en: "vertical" },
				left: { zh: "左侧距离", en: "left" },
				top: { zh: "上侧距离", en: "top" },
				right: { zh: "右侧距离", en: "right" },
				bottom: { zh: "下侧距离", en: "bottom" }
			},
			isShow: false,
			filterMode: [
				{ zh: "同一纬度数据过滤掉", en: "filter" },
				{ zh: "全部纬度数据过滤掉", en: "weakFilter" },
				{ zh: "不影响其他轴数据", en: "empty" },
				{ zh: "不过滤数据", en: "none" }
			],
			dataZoom: [
				{
					show: false,
					type: "slider",
					xAxisIndex: 0,
					filterMode: "filter",
					backgroundColor: "rgba(47,69,84,0)",
					dataBackground: {
						lineStyle: {},
						areaStyle: {}
					},
					fillerColor: "rgba(167,183,204,0.4)",
					borderColor: "#ddd",
					orient: "horizontal",
					left: "10%",
					right: "auto",
					top: "auto",
					bottom: "5",
					textStyle: {},
					handleStyle: {}
				},
				{
					type: "inside",
					xAxisIndex: 0,
					filterMode: "filter"
				},

				{
					show: false,
					type: "slider",
					yAxisIndex: 0,
					filterMode: "filter",
					backgroundColor: "rgba(47,69,84,0)",
					dataBackground: {
						lineStyle: {},
						areaStyle: {}
					},
					fillerColor: "rgba(167,183,204,0.4)",
					borderColor: "#ddd",
					orient: "vertical",
					left: "auto",
					right: "10",
					top: "auto",
					bottom: "60",
					textStyle: {},
					handleStyle: {}
				},

				{
					type: "inside",
					yAxisIndex: 0,
					filterMode: "filter"
				}
			],
			picker: {
				show: false,
				current: "",
				idx:0
			},
			originOption:'',
			isParse:false
		}),
		watch: {
			isShow() {
				if (this.isShow) {
					this.parseObj();					
				}else{
					this.picker.show = false;
				}

			},
			dataZoom:{
				deep:true,
				handler(){
					if(this.isShow&&!this.isParse)
					this.$emit("data-zoom-result", JSON.parse(JSON.stringify(this.dataZoom)));
				}
			}
		},
		methods: {
			showColorPicker(tag,idx) {
				if (this.picker.idx != idx || !this.picker.show||this.picker.current!=tag) {
					this.picker.current = tag;
					this.picker.idx=idx;
					this.picker.show = true;
				} else {
					this.picker.show = false;
				}
			},
			onColorPicker(op) {
				if (this.picker.current) 
				this.dataZoom[this.picker.idx][this.picker.current]=op.rgba;
			},
			onXLineStyle(result) {
				this.dataZoom[0].dataBackground.lineStyle = result;
			},
			onYLineStyle(result) {
				this.dataZoom[2].dataBackground.lineStyle = result;
			},
			onXAreaStyle(result) {
				this.dataZoom[0].dataBackground.areaStyle = result;
			},
			onYAreaStyle(result) {
				this.dataZoom[2].dataBackground.areaStyle = result;
			},
			onXTextStyle(result) {
				this.dataZoom[0].textStyle = result;
			},
			onYTextStyle(result) {
				this.dataZoom[2].textStyle = result;
			},

			onXHandleStyle(result) {
				this.dataZoom[0].handleStyle = result;
			},
			onYHandleStyle(result) {
				this.dataZoom[2].handleStyle = result;
			},
			sendStyle() {
				this.isShow=this.isShow?false:true;
				if(!this.isShow){
				this.$emit("data-zoom-result", JSON.parse(JSON.stringify(this.dataZoom)));
				}
			},
			parseObj() {				
				if (this.option instanceof Array && this.option.length==4) {
					this.isParse=true;
					for (var i = 0; i < this.option.length; i++) {
						for (var key in this.option[i]) {
							this.dataZoom[i][key] = this.option[i][key];
						}
					}
					this.originOption=JSON.stringify(this.dataZoom);
					var that=this;
					setTimeout(() => {
						that.isParse=false;
					}, 100);
					
				}
			},
		colseOption(){
			this.isShow=false;
			var that=this;
			if(this.originOption!=JSON.stringify(this.dataZoom)){
			setTimeout(() => {
				that.$emit("data-zoom-result", that.dataZoom);
			}, 50);
			
			}
			},
			listenEvent(){
				this.app.$on('close-option',this.colseOption);
			},
			offEvent(){
			this.app.$off('close-option',this.colseOption);
			}
		},
		mounted() {
			this.listenEvent();
			
		},
		beforeDestroy(){
			this.offEvent();
		}
	};
</script>
